
<div id="special">
    <div class="product-title">
        <div class="product-kill">
            <span>{{ heading_title }}</span>
            <div id="countdown">
                {#<span>倒數</span><span class="kill-number">10</span><span>:</span><span class="kill-number">51</span><span>:</span><span class="kill-number">45</span><span>結束</span>#}
            </div>
        </div>
        <div><a href="/specialproduct">查看全部</a><i class="iconfont icon-gengduo"></i></div>
    </div>
    <div class="product-content">
        <div class="scroll-box">
            {% for product in products %}
                <div class="product-layout">
				    {% if product.saveoff %}
                    <div class="discount">
                        <span class="discount-num">{{ product.saveoff }}</span>
                        <span class="discount-text">折</span>
                    </div>
					{% endif %}
                    <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}"
                                                                         alt="{{ product.name }}"
                                                                         title="{{ product.name }}"/></a></div>
					
                    {% if product.price %}
                        <p class="price">
                            {% if not product.special %}
                                {{ product.price }}
                            {% else %}
                                {{ product.special }}
                            {% endif %}
                        </p>
                    {% endif %}
                    <div class="product-progress">
                        {#100 - (銷量/庫存*100)#}
                        <div class="progress-color" style="left: -{{ 100-(product.sales_volume/product.quantity*100) }}%"></div>
                        <span>{{ product.sales_volume }} SOLD</span>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <input type="hidden" value="{{ date_end }}" id="home_date_end">
    <input type="hidden" value="{{ date_now }}" id="home_date_now">
</div>
<script>
    $(function () {
        countdown($('#home_date_now').val(), $('#home_date_end').val());
    });
    // 倒计时
    function countdown(startTime, endTime) {
        var allTime = endTime - startTime;
        var timer = setInterval(function () {
            if(allTime <= 0){
                $('#countdown').empty();
                clearInterval(timer);
                return false;
            }
            var h = Math.floor(allTime/3600);
            var m = Math.floor((allTime%3600)/60);
            var s = (allTime%3600)%60;
            if(h > 99){
                h = 99;
            }
            if(h < 10){
                h = '0' + h;
            }
            if(m < 10){
                m = '0' + m;
            }
            if(s < 10){
                s = '0' + s;
            }
            var tag = '<span class="kill-number">' + h + '</span><span class="kill-number">' + m + '</span><span class="kill-number">' + s + '</span>';
            $('#countdown').html(tag);
            allTime --;
        },1000)
    }
</script>